<!DOCTYPE html>
<html>

<head>
<meta name="gtv-autozoom" content="off" />

<title>Google TV jQuery Libary Demo</title>

<link rel="stylesheet" href="static/jquery-ui-lib/css/controls.css" />
<link rel="stylesheet" href="static/css/index.css" />

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Molengo&subset=latin">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Philosopher&subset=latin">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster&subset=latin">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Neucha&subset=latin">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Reenie+Beanie&subset=latin">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans&subset=latin">
<link id="nobile" rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Nobile&subset=latin">

</head>

<body>

<style>
body {
  background-color: #333;
  overflow: hidden;
  padding: 1%;
}

@-webkit-keyframes arrowextend {
  from {
    width: 100px;
  }
  to {
    width: 500px;
  }
}


.insight-middle-description {
  padding: 0px 0px 0px 0px;
  margin: 0px;
  font-size: 22pt;
  position: relative;
}

.particle {
  position: absolute;
}

.particle-movement {
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
}
.paddle-power {
  font-family: 'Lobster';
  font-size: 28pt;
  position: absolute;
  top: 0px;
  left: 1000px;
  color: green;
}

.particle-missed {
  font-family: 'Lobster';
  font-size: 48pt;
  position: absolute;
  color: red;
  margin: 0px;
  padding: 0px;
  top: 0px;
}

.overscan-size {
  color: #DDD;
  position: absolute;
  padding: 0px;
  margin: 0px;
  font-family: 'Molengo';
  font-size: 24pt;
  top: 90%;
}

.overscan-line {
  background-color: #000;
  width: 1px;
  height: 1px;
  position: absolute;
  left: 0px;
  top: 0px;
  padding: 0px;
  margin: 0px;
}
.overscan-horiz-line {
  background-color: #000;
  width: 1px;
  height: 1px;
  position: absolute;
  left: 0px;
  top: 0px;
  padding: 0px;
  margin: 0px;
}
.overscan-horiz-line-text {
  color: #000;
  position: absolute;
  left: 0px;
  top: 0px;
  padding: 0px;
  margin: 0px;
  font-family: 'Neucha';
  font-size: 20pt;
}

.overscan-line-bottom {
  background-color: #000;
  width: 1px;
  height: 1px;
  position: absolute;
  left: 0px;
  top: 0px;
  padding: 0px;
  margin: 0px;
}
.overscan-horiz-line-bottom {
  background-color: #000;
  width: 1px;
  height: 1px;
  position: absolute;
  left: 0px;
  top: 0px;
  padding: 0px;
  margin: 0px;
}
.overscan-horiz-line-text-bottom {
  color: #000;
  position: absolute;
  left: 0px;
  top: 0px;
  padding: 0px;
  margin: 0px;
  font-family: 'Neucha';
  font-size: 20pt;
}

.overscan-row {
  overflow: hidden;
  position: absolute;
}

.overscan-abs-row {
  width: 1920px;
  top: 25%;
  background-color: #777;
}

.overscan-abs-div {
  background-color: #d94;
  width: 620px;
  height: 100px;
  float: left;
  margin: 5px;
  border: 4px solid #aaa;
}

.overscan-pct-row {
  width: 100%;
  top: 50%;
  background-color: #777;
}

.overscan-pct-div {
  background-color: #5dd;
  width: 31%;
  height: 100px;
  float: left;
  margin: .5%;
  border: 4px solid #aaa;
}

.overscan-arrow-text {
  color: #333;
  font-family: 'Molengo';
  font-size: 36pt;
  position: absolute;
  margin: 0px;
  padding: 0px;
}

.overscan-arrow-line {
  background-color: #d72;
  height: 10px;
  border-radius: 10px;
}

.arrow-left {
  -webkit-transform: rotate(0deg);
}

.arrow-right {
  -webkit-transform: rotate(180deg);
}

.arrow-up {
  -webkit-transform: rotate(90deg);
}

.arrow-down {
  -webkit-transform: rotate(270deg);
}

.color-div {
  float: left;
  width: 29%;
  margin: 20px;
}
.color-block {
  padding: 25px;
}

</style>

<div id="font-preload" style="color:#333;position:absolute;">
  <span class='font-page-font-face'>.</span>
  <span class='font-page-reenie'>.</span>
  <span class='font-page-molengo'>.</span>
  <span class='font-page-philosopher'>.</span>
  <span class='font-page-lobster'>.</span>
  <span class='font-page-neucha'>.</span>
  <span class='font-page-droidsans'>.</span>
</div>
<div id="wrapper">
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

<script type="text/javascript" src="static/jquery-ui-lib/js/dynarrow.js"></script>

<script type="text/javascript" src="static/jquery-ui-lib/js/insights.js"></script>
<script type="text/javascript" src="static/jquery-ui-lib/js/hints.js"></script>
<script type="text/javascript" src="static/jquery-ui-lib/js/rotator.js"></script>
<script type="text/javascript" src="static/jquery-ui-lib/js/stacker.js"></script>
<script type="text/javascript" src="static/jquery-ui-lib/js/video.js"></script>
<script type="text/javascript" src="static/jquery-ui-lib/js/pagebuilder.js"></script>
<script type="text/javascript" src="static/jquery-ui-lib/js/sidenav.js"></script>
<script type="text/javascript" src="static/jquery-ui-lib/js/scrollrow.js"></script>
<script type="text/javascript" src="static/jquery-ui-lib/js/slider.js"></script>
<script type="text/javascript" src="static/jquery-ui-lib/js/gtvcore.js"></script>
<script type="text/javascript" src="static/jquery-ui-lib/js/keycontrol.js"></script>

<script type="text/javascript" src="static/builder.js"></script>
<script type="text/javascript" src="static/feed.js"></script>
<script type="text/javascript" src="static/font.js"></script>
<script type="text/javascript" src="static/navigation.js"></script>
<script type="text/javascript" src="static/overscan.js"></script>
<script type="text/javascript" src="static/pong.js"></script>
<script type="text/javascript" src="static/rolling.js"></script>
<script type="text/javascript" src="static/scrolling.js"></script>
<script type="text/javascript" src="static/scrollnav.js"></script>
<script type="text/javascript" src="static/sliding.js"></script>
<script type="text/javascript" src="static/stack.js"></script>
<script type="text/javascript" src="static/tutorial.js"></script>

<script type="text/javascript" src="static/index.js"></script>

</body>
</html>
